<template>
    <div>
        <!-- 商品列表 -->
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in list" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <p>{{ item.proname }}</p>
                    <p class="price">${{ item.originprice }}</p>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
// 引入商品列表接口
import { productlListApi } from '@/api/homeAPI'
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
import { Toast } from 'vant';


const list:any = ref([]);//定义商品列表数据
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const count = ref(1)
const limitNums = ref(10)
// 调用商品列表接口
interface good {
    count: number,
    limitNum: number
}

// loading:控制数据的加载，false 代表没有正在刷新，true 代表正在刷新
// finished : 控制数据是否加载完毕，true 代表数据全部加载完，false 代表数据没有加载完
// onLoad方法 :获取数据
// loading 、finished 值在data中进行设置，下拉时，loading会由false变为 true，代表正在刷新，并且获取数据，当数据获取到后，loading 又变为 false

// 上拉加载
const onLoad = () => {
    let values: good = {
        count: count.value++,
        limitNum: limitNums.value
    }
    productlListApi(values).then((res: any) => {
        console.log('商品列表数据', res);
        // 根据下拉状态判断商品列表的数据显示
        // 下拉刷新
        if (refreshing.value) {
            list.value = [];//清空商品列表数据
            refreshing.value = false;//让下拉状态变为false
        }
        if (res.code == '200') {
            list.value = list.value.concat(res.data)
            // 加载状态结束
            loading.value = false;
        }
        if (list.value.length == 0) {
            finished.value = true;
        }

    })
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
</script>
<style scoped lang="scss">
.van-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .van-cell {
        width: 50%;

        img {
            width: 90%;
        }

        p {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    }
}

:deep(.van-list__finished-text) {
    margin: 0 auto;
}
</style>